<template>
    <div class="wangeditor-content">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
            ref="toolbar"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="myContent"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
            ref="editor"
        />
    </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {getBase64} from "../../utils/source";
import {upload} from "../../api/source";
export default Vue.extend({
    components: { Editor, Toolbar },
    props: {
        content: {
            type: String,
            default: ""
        },
        editorChange: Function,
        placeholder: {
            type: String,
            default: ' '
        },
        extraStyle: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            editor: null,
            myContent: '',
            toolbarConfig: {

            },
            editorConfig: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    uploadImage: {
                        async customUpload(file, insertFn) {
                            getBase64(file, img => {
                                upload({base64: img}).then(res => {
                                    // this.$message.success('上传成功')
                                    const fileurl = `/source/${res.data.id}`
                                    insertFn(fileurl, '', fileurl)
                                }).catch(e => {
                                    this.$message.success('上传失败')
                                    console.error(e)
                                })
                            })
                            // file 即选中的文件
                            // 自己实现上传，并得到图片 url alt href
                            // 最后插入图片
                            console.log(file, insertFn)
                            // insertFn(url, alt, href)
                        }
                    }
                }
            },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            // 一定要用 Object.seal() ，否则会报错
            this.editor = Object.seal(editor)
            this.editor.setHtml(this.content)
        },
    },
    mounted() {

    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
    watch: {
        content(v) {
            this.myContent = v
        },
        myContent(v) {
            this.$emit('update:content', v)
            this.editorChange(
                this.editor.getText(),
                this.editor.getHtml()
            )
        }
    }
})
</script>

<style scoped>
.wangeditor-content {
    box-shadow: 0 0 2px #666666;
}
</style>
